import './index.scss'
import { Breadcrumb, Button, Card,  Form, Input, Modal, Popconfirm } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'
import { Link, useNavigate } from 'react-router-dom'
import { message } from 'antd'
import { useState } from 'react'
import { useSelector } from 'react-redux'
import { getUserDeleteAPI, getUserPasswordModifyAPI } from '@/api/user'

const Setting = () => {
  // 表单样式
  const formItemLayout = {
    labelCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 6,
      },
    },
    wrapperCol: {
      xs: {
        span: 24,
      },
      sm: {
        span: 14,
      },
    },
  } 
  
  

const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)
  const showPasswordModal = () => {
    setIsPasswordModalOpen(true)
  }
  const handleCancel = () => {
    setIsPasswordModalOpen(false)
    passwordForm.resetFields()
  }
  // 信息加密
  const userInfo = useSelector(state => state.user.userInfo)
  const phone = userInfo.phone.slice(0,3) + '********'
  const idCard = userInfo.idNumber.slice(0,6) + '************'

  // 修改密码
  const [passwordForm] = Form.useForm()
  const navigate = useNavigate()
  const editPassword = async () => {
    const formValue = passwordForm.getFieldsValue()
    const res = await getUserPasswordModifyAPI({...formValue, id: userInfo.id})
    if (res.code === 1) {
      setIsPasswordModalOpen(false)
      message.success('修改成功')
      navigate('/personal')
    } else {
      message.error(res.msg)
    }
  }
    // 注销账号
  const clearUser = async () => {
    const res = await getUserDeleteAPI(userInfo.id)
    if (res.code === 1) {
      navigate('/login')
    } else {
      message.error(res.msg)
    }
  }



  return (
    <div className="setting-info">
      <Card 
        className="setting-container"
        title={
            <Breadcrumb items={[
              { title: <Link to={'/personal'}>个人中心</Link> },
              { title: '账号设置' },
            ]}
            />
          }>
        <Form
          {...formItemLayout}
          size='large'
          variant="borderless"
          style={{
            maxWidth: 700,
          }}
          >
            <Form.Item
                label="用户密码"
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码',
                  }
                ]}
            >
              <Input.Password
                  defaultValue='123456'
                  disabled='true'
                  size="large"/>
                  <Button size='small' onClick={showPasswordModal}>修改密码</Button>
                  <Modal 
                    title="请进行身份验证" 
                    okText="确认"
                    cancelText="取消"
                    open={isPasswordModalOpen} 
                    onOk={editPassword} 
                    onCancel={handleCancel}>
                    <Form
                      {...formItemLayout}
                      form={passwordForm}
                      size='large'
                    >
                      {/* <Form.Item
                        name="idcard"
                        label='身份证号码'
                        rules={[
                          {
                            required: true,
                            message: '请输入身份证号码',
                          },
                          {
                            pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/            ,
                            message: '身份证号码格式不对'
                          }
                        ]}
                      >
                        <Input
                          size='large'
                          placeholder="请输入身份证号码"
                        />
                      </Form.Item>
                      <Form.Item
                        label="手机号码"
                        name="phone"
                        rules={[
                          {
                            required: true,
                            message: '请输入电话号码',
                          },
                          {
                            pattern: /^1[3-9]\d{9}$/,
                            message: '手机号码格式不对'
                          }
                        ]}
                      >
                        <Input
                          size='large'
                          placeholder="请输入手机号码"
                        />
                      </Form.Item> */}
                      <Form.Item
                        name="newPassword"
                        label="新密码"
                        rules={[
                          {
                            required: true,
                            message: '请输入密码',
                          },
                        ]}
                      >
                        <Input.Password
                          type="password"
                          placeholder="请输入密码"
                          size="large"
                        />
                      </Form.Item>
                      <Form.Item
                        name="newPassword2"
                        label="确认新密码"
                        dependencies={['newPassword']}
                        hasFeedback
                        rules={[
                          {
                            required: true,
                            message: '请再次输入密码',
                          },
                          ({ getFieldValue }) => ({
                            validator(_, value) {
                              if (!value || getFieldValue('newPassword') === value) {
                                return Promise.resolve()
                              }
                              return Promise.reject(new Error('两次密码输入不一致'))
                            },
                          }),
                        ]}
                      >
                        <Input.Password 
                          placeholder="请再次输入密码" 
                          size="large"/>
                      </Form.Item>
                    </Form>
                  </Modal>
            </Form.Item>
            <Form.Item
                label="用户手机号码"
                name="phone"
                rules={[
                  {
                    required: true,
                    message: '请输入电话号码',
                  },
                  {
                    pattern: /^1[3-9]\d{9}$/,
                    message: '手机号码格式不对'
                  }
                ]}
              >
                <Input
                  size='large'
                  placeholder="请输入手机号码"
                  disabled='true'
                  defaultValue={phone}
                  style={{
                    width: '100%',
                  }}
                />
                {/* <Button size='small'>修改手机号码</Button> */}
            </Form.Item>
            <Form.Item
              name="idcard"
              label='身份证号码'
              rules={[
                {
                  required: true,
                  message: '请输入身份证号码',
                },
                {
                  pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/            ,
                  message: '身份证号码格式不对'
                }
              ]}
            >
              <Input
                size='large'
                placeholder="请输入身份证号码"
                disabled='true'
                defaultValue={idCard}
                style={{
                  width: '100%',
                }}
              />
            </Form.Item>
            <Form.Item>
            <Popconfirm
              title="此项操作不可逆，您确定要注销账号吗?"
              onConfirm={clearUser}
              okText="确认"
              cancelText="取消"
              icon={
                <QuestionCircleOutlined
                  style={{
                    color: 'red',
                  }}
                />
              }
            >
              <Button danger>注销账号</Button>
            </Popconfirm>
                {/* <Modal 
                  title="请注意，此项操作很危险，需进行身份验证" 
                  open={isAccountModalOpen} 
                  okText="确认"
                  cancelText="取消"
                  onOk={handleOk} 
                  onCancel={handleCancel}>
                  <Form
                    {...formItemLayout}
                    size='large'
                  >
                    <Form.Item
                      name="idcard"
                      label='身份证号码'
                      rules={[
                        {
                          required: true,
                          message: '请输入身份证号码',
                        },
                        {
                          pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[Xx\d]$/            ,
                          message: '身份证号码格式不对'
                        }
                      ]}
                    >
                      <Input
                        size='large'
                        placeholder="请输入身份证号码"
                      />
                    </Form.Item>
                    <Form.Item
                      label="手机号码"
                      name="phone"
                      rules={[
                        {
                          required: true,
                          message: '请输入电话号码',
                        },
                        {
                          pattern: /^1[3-9]\d{9}$/,
                          message: '手机号码格式不对'
                        }
                      ]}
                    >
                      <Input
                        size='large'
                        placeholder="请输入手机号码"
                      />
                    </Form.Item>
                    <Form.Item
                      name="password"
                      label="密码"
                      rules={[
                        {
                          required: true,
                          message: '请输入密码',
                        },
                      ]}
                    >
                      <Input.Password
                        type="password"
                        placeholder="请输入密码"
                        size="large"
                      />
                    </Form.Item>
                  </Form>
                </Modal> */}
            </Form.Item>
        </Form>
      </Card>
    </div>
  )
}


export default Setting